
<template>
  <div class="search">
    <!-- 头部 -->
    <div class="header">
      <!-- 搜索框 -->
      <el-input
        placeholder="请输入内容"
        v-model="inputValue"
        clearable
        style="width: 20%"
      ></el-input>
      <!--搜索按钮 -->
      <el-button @click="searchProductData" plain icon="el-icon-search"
        >搜索</el-button
      >
      <!-- 发布按钮 -->
      <el-button type="success" round @click="release">发布文章</el-button>
      <!-- 表格内容展示区 -->
      <div class="newContent">
        <!--
        :data 要绑定数据源 请求成功之后拿到的数组
        prop 直接将数据对应key值填上去就可以 列
        label 每一列的名称 表头标题
       -->
        <div>
          <el-table
            :data="newsData.list"
            stripe
            style="width: 100%"
            @row-click="clickNews"
          >
            <!-- 封面列 -->
            <!-- <template slot-scope="scope">
           <div @click="clickNews(scope.row.id)"> -->
            <el-table-column
              prop="cover"
              label="封面"
              width="180"
              align="center"
            >
              <template slot-scope="scope">
                <img style="width: 150px" :src="scope.row.cover" alt="" />
              </template>
            </el-table-column>
            <!-- 标题列 -->
            <el-table-column label="标题">
              <template slot-scope="scope">
                <!-- 名称 -->
                <div>{{ scope.row.title }}</div>
                <!-- 类别 -->
                <div>
                  <span style="font-size: 10px">{{
                    scope.row.category.name
                  }}</span
                  ><br />
                  {{
                    moment(scope.row.publishTime).format("YYYY-MM-DD :HH:mm:ss")
                  }}
                </div>
              </template>
            </el-table-column>
            <!-- 阅读数量 -->
            <el-table-column
              prop="readnum"
              label="阅读次数"
              width="200px"
              align="center"
            >
              <template slot-scope="scope">
                <div v-if="scope.row.sales == null">暂无</div>
                <div v-else>{{ scope.row.sales }}</div>
              </template>
            </el-table-column>
            <!-- 状态 -->
            <el-table-column
              prop="status"
              label="状态"
              width="200px"
              align="center"
            >
              <template slot-scope="scope">
                <el-tag v-if="scope.row.status == '审核通过'" type="success"
                  >{{scope.row.status}}</el-tag
                >
                <el-tag v-else type="danger">{{scope.row.status}}</el-tag>
              </template>
            </el-table-column>
            <!-- 修改 编辑 审核 -->
            <el-table-column
              prop="operate"
              label="操作"
              width="200px"
              align="center"
            >
              <!-- 固定列 作用域的插槽-->
              <template slot-scope="scope">
                <el-button
                  v-if="scope.row.status == '审核通过'"
                  type="text"
                  size="small"
                  @click.stop="onLineClick(scope.row)"
                  >审核不通过</el-button
                >
                <el-button
                  v-if="scope.row.status == '审核不通过'"
                  type="text"
                  size="small"
                  @click.stop="onPastClick(scope.row)"
                  >审核通过</el-button
                >
                <el-button
                  @click.stop="editProduct(scope.row)"
                  type="text"
                  size="small"
                  >修改</el-button
                >
                <el-button
                  type="text"
                  @click.stop="delClick(scope.row)"
                  size="small"
                  >删除</el-button
                >
              </template>
            </el-table-column>
            <!-- </div>
            </template> -->
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// 引用vuex的辅助函数
import { mapActions, mapState } from "vuex";
import { get, post } from "@/utils/request";
var moment = require("moment");
export default {
  data() {
    return {
      inputValue: "",
      // 下拉菜单的数据 测试

      // 当前页数 - 分页使用
      page: 1,
      // 每页展示的数据条数 - 分页使用
      pageSize: 10,
    };
  },
  // 生命周期钩子函数
  created() {
    // 让获取产品数据的方法 在页面加载时自动执行
    this.getNewsData();
  },
  methods: {
    moment,
    // 发布
    release() {
      this.$router.push({
        path: "Publish",
        query: {
          type: "2",
        },
      });
    },

    onPastClick(row){
      let param = {
        id: row.id,
        status: "审核通过"
      }
      post("/article/check", param).then(res => {
        this.getNewsData()
        this.$notify({
              title: "成功",
              message: "审核通过",
              type: "success",
            });
      })
    },

    onLineClick(row){
      let param = {
        id: row.id,
        status: "审核不通过"
      }
      post("/article/check", param).then(res => {
        this.getNewsData()
        this.$notify({
              title: "成功",
              message: "审核不通过",
              type: "error",
            });
      })
    },
    // 搜索按钮
    searchProductData() {
      this.getNewsDataVuex({
        page: 1,
        pageSize: 100,
        title: this.inputValue,
      });
    },
    // 声明action的辅助函数
    // ...mapActions('模块名称',['getProductDataVuex'])
    ...mapActions("news", ["getNewsDataVuex"]),
    // 分页获取所有产品数据
    getNewsData() {
      // 设置参数
      let param = {
        page: this.page,
        pageSize: this.pageSize,
      };
      // 调用vuex中对应的方法
      this.getNewsDataVuex(param);
    },
    clickNews(data) {
      console.log(data.id);
      this.$router.push({
        // 跳转的路由路径
        path: "/info/Details",
        // 想要传递的参数 使用query对象的形式进行传递
        query: {
          id: data.id,
        },
      });
    },
    editProduct(row) {
      console.log(row, "-------");
      this.$router.push({
        path: "Publish",
        query: {
          id: row.id,
          type: "1",
        },
      });
    },

    delClick(row) {
      this.$confirm("是否删除该文章, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let param = {
            id: row.id,
          };
          get("/article/deleteById", param).then(res => {
            this.getNewsData()
            this.$notify({
              title: "成功",
              message: "删除成功",
              type: "success",
            });
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
  computed: {
    // 声明辅助函数 获取state中的值
    ...mapState("news", ["newsData", "newsData"]),
  },
};
</script>


<style scoped>
.header {
  min-height: calc(100vh - 100px);
}
.newContent {
  margin-top: 10px;
  /* 设置表格区域最大高度 */
  max-height: 600px;
  /* 处理超区内容区域的样式 */
  overflow: auto;
}
</style>
